<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>导航</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.7/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 
        导航组件
            layui-nav  layui-bg-molv/blue/cyan
            layui-nav-tree 将水平改成垂直的
            layui-nav-tree layui-nav-side 将垂直导航改为侧边导航
                layui-nav-item > a {导航内容}
                    dl.layui-nav-child
                    dd>a
                
                layui-this 指定 导航选项 的激活样式
         -->

        <ul class="layui-nav layui-nav-tree" lay-shrink="all">
            <li class="layui-nav-item layui-this"><a href="javascript:;">导航1</a></li>
            <li class="layui-nav-item" lay-unselect><a href="javascript:;">导航2</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">有子元素</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">子组件1</a></dd>
                    <dd class="layui-this"><a href="javascript:;">子组件2</a></dd>
                    <dd><a href="javascript:;">子组件3</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">导航4</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">子组件1</a></dd>
                    <dd class="layui-this"><a href="javascript:;">子组件2</a></dd>
                    <dd><a href="javascript:;">子组件3</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">导航5</a></li>
        </ul>
    </div>

    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">国际新闻</a>
        <a href="">亚太地区</a>
        <a><cite>正文</cite></a>
    </span>
    <br>
    <span class="layui-breadcrumb" lay-separator="-">
        <a href="#aa">首页</a>
        <a href="#bb">国际新闻</a>
        <a href="#cc">亚太地区</a>
        <a><cite>正文</cite></a>
    </span>

    <!-- Layui组件使用功能，需要模块支持 element
        模块引入有两种方式：
            1. 使用  layui.js  中的 layui.use() 方法
            2. 使用  layui.all.js 
    -->
    <!-- <script src="../lib/layui-v2.5.7/layui/layui.js"></script> -->
    <script src="../lib/layui-v2.5.7/layui/layui.all.js"></script>
    <script type="text/javascript">
        /* 
        layui.use("模块名", function(){ 使用模块 })
        layui.use([模块1, 模块2, 模块3, ...], function(){ 使用模块 })
            模块加载可以当作 ajax 请求，是一个异步请求过程
        */
       
        // layui.use("element", function (){
        //    console.log("61 layui.element", layui.element);
        // })

        // setTimeout(function (){
            console.log("layui.element", layui.element);
        // }, 1000)
    </script>
</body>
</html>